{[{define "demo/document/drawer.html"}]}
{[{template "sys/base/mark.html"}]}
<html>
<head>
    <meta charset="utf-8">
    <title>抽屉组件</title>
    <link href="/pear-admin-layui/component/pear/css/pear.css" rel="stylesheet"/>
    <style>
        .wrap {
            display: none;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">开发环境</div>
            <div class="layui-card-body">
                Drawer 在 弹出层 UI 上带来不一样的体验.
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<script src="/pear-admin-layui/component/layui/layui.js"></script>
								 并
								<script src="/pear-admin-layui/component/pear/pear.js"></script>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">抽屉</div>
            <div class="layui-card-body">
                <button class="drawer-top pear-btn pear-btn-primary">上</button>
                <button class="drawer-bottom pear-btn pear-btn-success">下</button>
                <button class="drawer-left pear-btn pear-btn-warming">左</button>
                <button class="drawer-right pear-btn pear-btn-danger">右</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(['drawer'], function() {
									var drawer = layui.drawer;

								    drawer.open({
								        direction: "right",
								        dom: ".layer-top",
								        distance: "30%"
								    });
								})
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">进阶</div>
            <div class="layui-card-body">
                <button class="drawer-close-mask pear-btn pear-btn-primary">手动关闭</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								var dom;

								$(".drawer-close-mask").click(function() {
								    dom = drawer.open({
								        direction: "right",
								        dom: ".layer-close-mask",
								        distance: "30%",
								        maskClose: false
								    });
								})

								$("#btnClose").click(function() {
								    dom.close();
								})

							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">扩展</div>
            <div class="layui-card-body">
                <button class="drawer-auto-close pear-btn pear-btn-success">自动关闭</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(['drawer'], function() {
									var drawer = layui.drawer;

								    $(".drawer-auto-close").click(function() {
								        dom = drawer.open({
								            direction: "right",
								            dom: ".layer-auto-close",
								            distance: "30%",
								            maskClose: false,
								            time: 1000
								        });
								    })
								})
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">扩展</div>
            <div class="layui-card-body">
                <button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(['drawer'], function() {
									var drawer = layui.drawer;

								    $(".drawer-auto-close").click(function() {
								        dom = drawer.open({
								            direction: "right",
								            dom: ".layer-auto-close",
								            distance: "30%",
								            success:function(){
								                layer.msg("触发回调函数");
								            }
								        });
								    })
								})
							</pre>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">扩展</div>
            <div class="layui-card-body">
                <div id="targetEl"
                     style="width: 600px;
								height: 300px;
								overflow: hidden;
								position: relative;
								border: 1px solid gainsboro;
								background-color: #EEE;
								margin-top: 20px;
								display: flex;
								justify-content: space-around;
								align-items: center">
                <button id="targetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
            </div>
        </div>
    </div>
</div>
<div class="layui-col-md12">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">显示代码</h2>
            <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
									layui.use(['drawer'], function() {
									  var drawer = layui.drawer;
									    $("#targetDemo").click(function () {
									      drawer.open({
									      // 指定挂载节点
									      target: "#targetEl"
									      direction: "right",
									      dom: ".layer-right",
									      distance: "50%",
									      });
									})
							</pre>
            </div>
        </div>
    </div>
</div>
<!-- 新版 API -->
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">基于 layer 的抽屉扩展</div>
        <div class="layui-card-body">
            <p style="margin-bottom: 10px;">兼容原版 drawer 所有参数,要使用 layer 扩展,设置 legacy 选项为 false 即可</p>
            <button id="layerDrawerLeft" class="pear-btn pear-btn-success">左</button>
            <button id="layerDrawerRight" class="pear-btn pear-btn-success">右</button>
            <button id="layerDrawerTop" class="pear-btn pear-btn-success">上</button>
            <button id="layerDrawerBottom" class="pear-btn pear-btn-success">下</button>
            <button id="layerDrawer" class="pear-btn pear-btn-success">更多参数示例</button>
            <button id="layerDrawerParent" class="pear-btn pear-btn-success">父窗口打开</button>
            <button id="layerDrawerIframe" class="pear-btn pear-btn-success">iframe远程页面</button>
            <button id="layerDrawerURL" class="pear-btn pear-btn-success">URL远程页面</button>
            <div
                    id="layertargetEl"
                    style="width: 600px;
								height: 300px;
								overflow: hidden;
								position: relative;
								border: 1px solid gainsboro;
								background-color: #EEE;
								margin-top: 10px;
								display: flex;
								justify-content: space-around;
								align-items: center">
                <button id="layertargetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
            </div>
            <blockquote class="layui-elem-quote layui-quote-nm">指定容器内打开，需使用 layer 捕获层模式，并设置目标容器
                style="overflow: hidden;
                position: relative;"
            </blockquote>
            <blockquote class="layui-elem-quote layui-quote-nm">
                使用 url 参数指定抽屉代码片段地址，会使用 ajax 请求将代码片段拼接到抽屉中，和原来的页面在同一个页面上,
                传值更方便。注意片段和原页面不能出现相同的 ID。
            </blockquote>
        </div>
    </div>
</div>
<div class="layui-col-md12">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">显示代码</h2>
            <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
											$("#layerDrawerLeft").click(function(){
											  drawer.open({
											    legacy: false,
											    offset: 'l',
											    area: "30%",
											    content: "left内容",
											  })
											})
											$("#layerDrawerRight").click(function () {
											  drawer.open({
											    legacy: false,
											    offset: 'r',
											    area: "30%",
											    content: "right内容",
											  })
											})
											$("#layerDrawerTop").click(function () {
											  drawer.open({
											    legacy: false,
										      offset: "t",
											    content: "top内容",
											  })
											})
											$("#layerDrawerBottom").click(function () {
											  drawer.open({
											    legacy: false,
											    offset: "b",
											    content: "bottom内容",
											  })
											})

											$("#layerDrawer").click(function () {
											  var index = drawer.open({
											    legacy: false,
											    title: ['标题', 'font-size:16px;color:#2d8cf0'],
											    maxmin: true,
											    offset: "r",
											    area: "30%",
											    content: "抽屉内容",
											    btn:"关闭",
											    yes:function(index,layero){
											      drawer.close(index);
											      console.log(index,layero);
											    },
											    btnAlign: "l",
											    closeBtn: 1,
											  })
											})

											$("#layerDrawerParent").click(function () {

											  var index = parent.layui.drawer.open({
												    legacy: false,
												    title: ['标题', 'font-size:16px;color:#2d8cf0'],
												    maxmin: true,
												    offset: "r",
												    area: "30%",
												    content: "抽屉内容",
												    btn:"关闭",
												    yes:function(index,layero){
												      drawer.close(index);
												      console.log(index,layero);
												    },
												    btnAlign: "l",
												    closeBtn: 1,
												})
											})

											$("#layertargetDemo").click(function () {
											    drawer.open({
											    legacy: false,
											    target: "#layertargetEl",
											    direction: "right",
											    dom: ".layer-right",
											    distance: "50%",
											    });
											})

											$("#layerDrawerIframe").click(function () {
											  drawer.open({
											  legacy: false,
											  title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
											  offset: 'r',
											  area: "80%",
											   maxmin: true,
											   closeBtn: 1,
											   iframe: window.location.origin + "/view/document/table.html"
											  })
											})

											$("#layerDrawerURL").click(function () {
											   drawer.open({
										     legacy: false,
										     title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
											   offset: 'r',
											   area: "80%",
											   maxmin: true,
											   closeBtn: 1,
											   url: window.location.origin + "/view/document/drawerFragment.html"
											   })
											})
							</pre>
            </div>
        </div>
    </div>
</div>
</div>

<div class="layer-left" style="display: none;">
    <br/>
    <h3>左侧弹层内容...</h3>
</div>
<div class="layer-right" style="display: none;">
    <br/>
    <h3>右侧弹层内容...</h3>
</div>
<div class="layer-top" style="display: none;">
    <br/>
    <h3>上侧弹层内容...</h3>
</div>
<div class="layer-bottom" style="display: none;">
    <br/>
    <h3>下侧弹层内容...</h3>
</div>

<div class="layer-open-mask" style="display: none;">
    <br/>
    <h3>点击右侧灰色区域</h3>
</div>
<div class="layer-close-mask" style="display: none;">
    <button id="btnClose" class="pear-btn pear-btn-primary"
            style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉
    </button>
</div>
<div class="layer-auto-close" style="display: none;">
    <br/>
    <h3>打开 2秒 后自动关闭...</h3>
</div>

</body>

<script src="/pear-admin-layui/component/layui/layui.js"></script>
<script src="/pear-admin-layui/component/pear/pear.js"></script>
<script>
    layui.use(['element', 'jquery', 'drawer', 'layer', 'code'], function () {
        var element = layui.element;
        var $ = layui.jquery;
        var drawer = layui.drawer;
        var layer = layui.layer;

        layui.code();

        $("#layerDrawerIframe").click(function () {
            drawer.open({
                legacy: false,
                title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
                offset: 'r',
                area: "80%",
                maxmin: true,
                closeBtn: 1,
                iframe: window.location.origin + "/view/document/table.html"
            })
        })

        $("#layerDrawerURL").click(function () {
            drawer.open({
                legacy: false,
                title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
                offset: 'r',
                area: "80%",
                maxmin: true,
                closeBtn: 1,
                url: window.location.origin + "/view/document/drawerFragment.html"
            })
        })

        $("#layerDrawerLeft").click(function () {
            drawer.open({
                legacy: false,
                offset: 'l',
                area: "30%",
                content: "left内容",
            })
        })
        $("#layerDrawerRight").click(function () {
            drawer.open({
                legacy: false,
                offset: 'r',
                area: "30%",
                content: "right内容",
            })
        })
        $("#layerDrawerTop").click(function () {
            drawer.open({
                legacy: false,
                offset: "t",
                content: "top内容",
            })
        })
        $("#layerDrawerBottom").click(function () {
            drawer.open({
                legacy: false,
                offset: "b",
                content: "bottom内容",
            })
        })

        $("#layerDrawer").click(function () {
            var index = drawer.open({
                legacy: false,
                title: ['标题', 'font-size:16px;color:#2d8cf0'],
                maxmin: true,
                offset: "r",
                area: "30%",
                content: "抽屉内容",
                btn: "关闭",
                yes: function (index, layero) {
                    drawer.close(index);
                    console.log(index, layero);
                },
                btnAlign: "l",
                closeBtn: 1,
            })
        })

        $("#layerDrawerParent").click(function () {
            var index = parent.layui.drawer.open({
                legacy: false,
                title: ['标题', 'font-size:16px;color:#2d8cf0'],
                maxmin: true,
                offset: "r",
                area: "30%",
                content: "抽屉内容",
                btn: "关闭",
                yes: function (index, layero) {
                    parent.layui.drawer.close(index);
                    console.log(index, layero);
                },
                btnAlign: "l",
                closeBtn: 1,
            })
        })

        $("#layertargetDemo").click(function () {
            drawer.open({
                legacy: false,
                target: "#layertargetEl",
                direction: "right",
                dom: ".layer-right",
                distance: "50%",
            });
        })

        $(".drawer-right").click(function () {
            drawer.open({
                direction: "right",
                dom: ".layer-right",
                distance: "30%"
            });
        })

        $(".drawer-left").click(function () {

            drawer.open({
                direction: "left",
                dom: ".layer-left",
                distance: "30%"
            });

        })

        $(".drawer-top").click(function () {
            drawer.open({
                direction: "top",
                dom: ".layer-top",
                distance: "30%"
            });
        })

        $(".drawer-bottom").click(function () {
            drawer.open({
                direction: "bottom",
                dom: ".layer-bottom",
                distance: "30%"
            });
        })

        $(".drawer-open-mask").click(function () {
            drawer.open({
                direction: "right",
                dom: ".layer-open-mask",
                distance: "30%",
                maskClose: true
            });
        })

        var dom;

        $(".drawer-close-mask").click(function () {
            dom = drawer.open({
                direction: "right",
                dom: ".layer-close-mask",
                distance: "30%",
                maskClose: false
            });
        })

        $("#btnClose").click(function () {
            dom.close();
        })

        $(".drawer-auto-close").click(function () {
            dom = drawer.open({
                direction: "right",
                dom: ".layer-auto-close",
                distance: "30%",
                maskClose: false,
                time: 1000
            });
        })

        $(".drawer-call-back").click(function () {
            dom = drawer.open({
                direction: "right",
                dom: ".layer-right",
                distance: "30%",
                success: function () {
                    layer.msg("触发回调函数", {
                        icon: 1,
                        time: 1000
                    });
                }
            });
        })

        $("#targetDemo").click(function () {
            drawer.open({
                target: "#targetEl",
                direction: "right",
                dom: ".layer-right",
                distance: "50%",
            });
        })

    })
</script>
</html>
{[{end}]}